<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    绑定html class-->
    <div
            class="test"
            style="width:200px;height:200px;text-align: center;line-height: 200px">
        <!--            v-bind:class="['active':'isActivate']"-->

        zion xie
    </div>
    <div v-bind:style="{color: color}" v-bind:class="align">
        第二个div
    </div>

    <div :style="{color: color, fontSize:size, background: isRed ? '#FF0000': ''}">
        第三个div
    </div>
<!--对象语法-->
    <div v-bind:class="classObject">
        计算属性
    </div>
<!--    数组语法-->
<!--    可以使用数组对象，也可以使用单对象，也可以使用多元运算符-->
    <div v-bind:class=
                 "[
                 isActive ? activeClass : '',
                 {css1:isCss1}
                 ]">
        数组语法
    </div>
<!--    绑定内联样式Style-->
<!--    <div v-bind:style="{color: activeColor, fontSize: fontSize+'px'}">-->
<!--            内联样式-->
<!--    </div>-->
    <div v-bind:style="styleObject">内联样式对象语法</div>
    <div v-bind:style="[baseStyle,overridingStyles]">内联样式数组语法</div>
</div>


<!--js代码逻辑-->

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            isActive: true,
            color: '#FF02111',
            isRed: true,
            size: '50px',
            align: 'div-align',
            error:null,
            flag1: 12,
            isCss1: true,
            isCss2: true,
        //  数组语法
            activeClass: 'active',
            errorClass: 'text-danger',
        //  内联样式
            fontSize: 60,
            activeColor: 'red',
            styleObject:{
                color: 'red',
                fontSize: '43px'
            },
            baseStyle: {
                fontSize: '19px'
            },
            overridingStyles: 'overridingStyles'
        },
        computed:{
            classObject:function () {
                return{
                    active: this.isActive&&!this.error,
                    'text-danger': this.error&&this.error.type==='fatal',
                    css1: this.isCss1,
                    css2: this.isCss2
                }
            }

        }
    })
</script>
<style type="text/css">
    .zion {
        color: blue;
        font-size: 112px;
    }
    .active {
        background: red;
    }

    .div-align {
        color: green;
        width: 200px;
        height: 200px;
        background: beige;
        text-align: center;
        line-height: 200px
    }
    .css1{
        color: blue;
        background: beige;
        font-size: 122px;
    }
    .css2{
        color: blue;
        font-size: 12px;
        background: green;
    }
    .baseStyle{
        font-size: 12px;
    }
    .overridingStyles{
        background: blueviolet;
    }
</style>
</body>
</html>